<template>
    <dev class='111'>售后详情页</dev>
    <el-card class="box-card">
    <el-form :model="repairForm" style="width: 800px;height: 400px">
      <el-form-item label="姓名">
        <el-input v-model="repairForm.buyer" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="repairForm.phoneNumber" />
      </el-form-item>
  
    <el-form-item label="故障机器">
        <div class="m-4">
        <el-cascader
      v-model="value"
      :options="options"
      :props="props"
      @change="handleChange"
    />
  </div></el-form-item>

      <el-form-item label="故障详情">
        <el-input v-model="repairForm.faultDetails" type="textarea" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button >取消</el-button>
      </el-form-item>
    </el-form>
</el-card>
  </template>
  
  <script lang="ts" setup>
  
  import { reactive } from 'vue'
  
  // do not use same name with ref
  const form = reactive({
    buyer: '',
    phoneNumber:'',
    address:'',
    desc:'',
  })

  const repairForm =  reactive({
      buyer:"",
      phoneNumber:"",
      deviceName:"",
      faultDetails:""
  })
  
  const onSubmit = () => {
      repairForm.deviceName = value.value[1]
      console.log(repairForm)

      axios.post("http://localhost:9091/repair/add",repairForm).then(res=>{
          console.log(res)
      })


    console.log('submit!')
  }
  import { ref } from 'vue'
  import {FormInstance} from "element-plus";
  import axios from "axios";

const value = ref([])

const props = {
  expandTrigger: 'hover' as const,
}



const handleChange = (value) => {
  console.log(value)
}
const options = [
    {
        value: 'yxl',
        label: '影像类',
        children: [
            {
                value: '彩色超声多普勒治疗仪',
                label: '彩色超声多普勒治疗仪',
            },
            {
                value: 'C臂型X光机',
                label: 'C臂型X光机',
            },
            {
                value: 'CT控制盒',
                label: 'CT控制盒',
            },
            {
                value: 'CT机',
                label: 'CT机',
            },
        ],
    },
    {
        value: 'kfl',
        label: '康复类',
        children: [
            {
                value: '下肢辅助行走设备',
                label: '下肢辅助行走设备',
            },
            {
                value: '牵引器',
                label: '牵引器',
            },
            {
                value: '代步轮椅',
                label: '代步轮椅',
            },
            {
                value: '外骨骼机器人',
                label: '外骨骼机器人',
            },
        ],
    },
    {
        value: 'sys',
        label: '实验室类',
        children: [
            {
                value: '纯水仪',
                label: '纯水仪',
            },
            {
                value: '稀释仪',
                label: '稀释仪',
            },
            {
                value: '血浆机',
                label: '血浆机',
            },
            {
                value: 'X荧光分析仪',
                label: 'X荧光分析仪',
            },
        ],
    },
    {
        value: 'jtl',
        label: '家庭类',
        children: [
            {
                value: '脑波设备',
                label: '脑波设备',
            },
            {
                value: '老人陪护机器人',
                label: '老人陪护机器人',
            },
            {
                value: '颈椎治疗仪',
                label: '颈椎治疗仪',
            },
            {
                value: '护眼仪',
                label: '护眼仪',
            },
        ],
    },
    {
        value: '检测类',
        label: '检测类',
        children: [
            {
                value: '血糖检测仪',
                label: '血糖检测仪',
            },
            {
                value: '心电监测仪',
                label: '心电监测仪',
            },
            {
                value: '点滴警报仪',
                label: '点滴警报仪',
            },
            {
                value: 'BMI测试仪',
                label: 'BMI测试仪',
            },
        ],
    },
    {
        value: 'zll',
        label: '治疗类',
        children: [
            {
                value: '制氧机',
                label: '制氧机',
            },
            {
                value: '雾化器',
                label: '雾化器',
            },
        ],
    },
]
  </script>
  